
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>arcgis</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        body{ text-align:center}
        #paneDiv {
            position: absolute;
            top: 55px;
            right: 18px;
            padding: 12px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            /*color: white;*/
        }
        .echart{
            position: absolute;
            height: 250px;
            width: 400px;
            background-color: rgba(255, 255, 255, 0.7);
        }

       
    </style>
    <script src="scripts/echart/echarts.min.js"></script>

    <link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
    <script src="https://js.arcgis.com/4.3/init.js"></script>
    <script src="scripts/jquery/jquery-3.0.0.min.js"></script>
<!-- <link rel="stylesheet" href="3rd/main.css"> -->
<!-- <script src="3rd/init.js"></script> -->

    <script>
     require(["esri/config", "esri/Map", "esri/Color", "esri/request", "esri/views/SceneView", "esri/layers/FeatureLayer", 
     "esri/layers/GraphicsLayer", "esri/layers/support/LabelClass", "esri/renderers/SimpleRenderer", "esri/renderers/UniqueValueRenderer",
      "esri/symbols/PointSymbol3D", "esri/symbols/IconSymbol3DLayer", "esri/symbols/ObjectSymbol3DLayer", "esri/symbols/TextSymbol3DLayer", 
      "esri/symbols/LabelSymbol3D", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/support/jsonUtils",
    "esri/geometry/Point", "esri/geometry/Polygon", "dojo/on", "dojo/dom", "dojo/_base/array", "dojo/domReady!"], 
     function(d, e, f, g, h, j, k, l, m, n, o, p, q, r, s, u, v, w, x, y, z, A, B) {
    d.request.corsDetection = false;
    initChart();
    //d: config, e: map, f: color, g: request, h: sceneview, j: FeatureLayer,
    //k: GraphicsLayer, l: LabelClass, m: SimpleRenderer, n: UniqueValueRenderer
    //o: PointSymbol3D, p: IconSymbol3DLayer, q: ObjectSymbol3DLayer, r: TextSymbol3DLayer
    //s: LabelSymbol3D, u: SimpleMarkerSymbol, v: SimpleFillSymbol, w: jsonUtils,
    //x: Point, y: Polygon, z: on, A: array, B: domReady
    //L: 地图实例化对象, M: sceneview实例化对象
    var C, stFlayer, labelClass; //labelClass: 地图标签样式, stFlayer:站点图层
    var lengthData = []; //x坐标数据集
    var markerData = []; //length的数据
    var gisData = []; //保存gis地图颜色变化信息
    var seriesData = []; //曲线图数据
    var gislegend; //保存gmax和gmin
    var valueType; // 0: planValue, 1: realValue
    // var stationLists = []; //站点数据集
    var D = []; //时间序列
    var E = {}; //二维数组,时间序列: [对应的水质]
    var F = 0; //记录次数
    var G = [],
        chartData1 = [];
    var H = [],
        chartData2 = [];
    var I = [],
        chartData3 = [];
    var J = new f("#FF0000");
    var K = new f("#0000FF");
    labelClass = new l({
        symbol: new s({
            symbolLayers: [new r({
                material: {
                    color: "red"
                },
                size: 15
            })]
        }),
        labelPlacement: "above-right",
        labelExpressionInfo: {
            value: "{stnm}"
        }
    });
    var L = new e({
        basemap: "satellite",
        ground: "world-elevation"
    });// 地图对象
    /*var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/china2012shp/MapServer");
    L.addLayer(dynamicMapServiceLayer);*/
    var M = new h({
        container: "viewDiv",
        map: L,
        camera: {
            position: [116, 27, 193262],
            tilt: 40,
            zoom: 8
        }
    });
    M.then(loadDm()).otherwise(errback);
    M.then(loadStation()).otherwise(errback);
    var t;
    z(A.byId("btnPlay"), "click", function() {
        var a = document.getElementById('btnPlay').value;
        if (a == "播放") {
            t = setTimeout(function() {
                var proCd = "1000000000006"
                var planType = 2; //水质模拟: 1, 水量调度2
                
                var hash = window.top.location.hash;
                console.log('hash', hash);
                if(hash == "#waterQuality"){
                    console.log('水质模拟!')
                    proCd = window.top.Ext.getCmp('waterQualityProCd').getValue();
                    planType = 1;
                }else{
                    console.log('水量调度!')
                    proCd = window.top.Ext.getCmp('newPlanProCd').getValue();
                    planType = 2;
                };
                valueType = Number(document.getElementById('valueType').value);
                $.ajax({
                    type: "POST",
                    url: "http://123.85.3.50:9004/jsite-szy-dispatch/a/emergency/edmodel/initgis",
                    data: "proCd=" + proCd + "&stype=" + planType,
                    success: function(data){
                        if(data.serviceResp.code == 1 ){
                            seriesData = [];
                            lengthData = [];
                            var listres = data.listres;
                            gisData = data.gislist;
                            gislegend = data.gislegend;
                            if(listres[0] && listres[0].list.length>0){
                                for(var i=0; i<listres.length; i++){
                                    var stationSeries = {name: listres[i].secnm, type: 'line', smooth: true, data: []};
                                    markerData.push(listres[i].secnm)
                                    for(var j=0; j<listres[i].list.length; j++){
                                        stationSeries.data.push(Number(listres[i].list[j].data[valueType].boPl));
                                    };
                                    seriesData.push(stationSeries);
                                };
                                for(var i=0; i<listres[0].list.length; i++){
                                    lengthData.push(listres[0].list[i].time);
                                };
                                console.log('横坐标数据集', lengthData);
                                console.log('曲线数据集', seriesData);
                                console.log('map数据集', markerData)
                                showChanges();
                            }else{
                                console.log('没有曲线数据!')
                            }
                        }else{
                            alert(data.serviceResp.msg)
                        }
                    }
                });
            }, 500);
            document.getElementById('btnPlay').value = "暂停"
        } else {
            window.clearTimeout(t);
            document.getElementById('btnPlay').value = "播放"
        }
    });
    z(A.byId("chkLayer"), "click", function() {
        stFlayer.visible = document.getElementById('chkLayer').checked
    });
    //深拷贝
    function cloneObj(obj){
        var str, newobj = obj.constructor === Array ? [] : {};
        if(typeof obj !== 'object'){
            return;
        } else if(window.JSON){
            str = JSON.stringify(obj), //序列化对象
            newobj = JSON.parse(str); //还原
        } else {//如果不支持以上方法
            for(var i in obj){
                newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; 
            }
        }
        return newobj;
    };

    function showChanges() {
        console.log('showChanges')
        if (F >= lengthData.length) {
            F = 0;
            chartData1 = [];
            I = [];
            document.getElementById('btnPlay').value = "播放";
            return
        }
        document.getElementById('tm').innerHTML = lengthData[F];
        C.graphics.forEach(function(a, i) {
            var type;
            if(valueType == 0){
                type = "planValue";
            }else{
                type = "realValue";
            };
            if(!gisData[F].data[a.attributes.FID]) return;
            a.attributes.wq = gisData[F].data[a.attributes.FID][type];
            console.log('wq', a.attributes.wq)
            if (a.attributes.wq == 0) {
                console.log('没有变化!')
                a.symbol = new v({
                    color: new f({
                        r: 0,
                        g: 0,
                        b: 255,
                        a: 0.6
                    }),
                    outline: {
                        width: 0
                    }
                });
                a.symbol.color.a = a.attributes.wq;
            } else {
                var color;
                var min = Number(gislegend.gmin);
                var max = Number(gislegend.gmax);
                var range = max - min;
                var wq = Number(a.attributes.wq);
                if(min <= wq < (min + range*0.2)){
                    color = new f("#44cef6"); //一级
                }else if((min + range*0.2) <= wq < (min + range*0.4)){
                    color = new f("#00e500"); //二级
                }else if((min + range*0.2) <= wq < (min + range*0.4)){
                    color = new f("#ffff00"); //二级
                }else if((min + range*0.2) <= wq < (min + range*0.4)){
                    color = new f("#ffa500"); //二级
                }else if((min + range*0.2) <= wq < (min + range*0.4)){
                    color = new f("#ff0000"); //二级
                }else{
                    color= new f("#000000");
                };
                console.log('变化了!', color)
                a.symbol.color = color;
            }
            a.symbol.color.a = 0.9
        });
        var b = C.graphics.clone();
        C.removeAll();
        C.addMany(b);
        
        var showSeries = cloneObj(seriesData);
        var showlengthData = lengthData.slice(0, F);
        for(var i=0; i<seriesData.length;i++){
            showSeries[i].data = seriesData[i].data.slice(0, F)
        };
        chart1.setOption({
            xAxis: {
                data: showlengthData
            },
            legend: {
                data: markerData
            },
            series: showSeries
        });
        F++;
        t = setTimeout(showChanges, 500)
    }
    var N;

    function loadDm() {
        g("data/json/dm1.json", {
            responseType: "json"
        }).then(function(b) {
            var c = b.data; //features
            return B.map(c.features, function(a, i) {
                return {
                    geometry: new y({
                        rings: a.geometry.rings,
                        spatialReference: {
                            wkid: 4326
                        }
                    }),
                    attributes: a.attributes,
                    symbol: new v({
                        color: new f({
                            r: 0,
                            g: 0,
                            b: 255,
                            a: 0.6
                        }),
                        outline: {
                            width: 0
                        }
                    }),
                    popupTemplate: {
                        title: "{FID}"
                    }
                }
            })
        }).then(function(a) {
            C = new k({
                graphics: a
            });
            L.add(C);
            return C
        }).then(function() {
            g("data/json/dmsz1.json", {
                responseType: "json"
            }).then(function(a) {
                var b = a.data.data;
                for (var i = 0; i < b.length; i++) {
                    D.push(b[i].dt);
                    E[b[i].dt] = b[i]
                }
                console.log('时间序列', D);
                console.log('时间序列对应的值得二维数组', E)
            });
            if (chart1) {
                chart1.setOption({})
            }
            return b;
        })
     
    }

    function loadStation() {
        g("data/json/location1.json", {
            responseType: "json"
        }).then(function(b) {
            return B.map(b.data.data, function(a, i) {
                return {
                    geometry: new x({
                        x: a.lgtd,
                        y: a.lttd
                    }),
                    symbol: new u({
                        color: [255, 0, 0, 255],
                        size: 10,
                        type: "esriSMS",
                        outline: {
                            color: [0, 0, 0, 255],
                            width: 0.75,
                            type: "esriSLS",
                            style: "esriSLSSolid"
                        }
                    }),
                    attributes: a
                }
            })
        }).then(function(a) {
            var b = [{
                name: "ObjectID",
                alias: "ObjectID",
                type: "oid"
            }, {
                name: "stnm",
                alias: "stnm",
                type: "string"
            }, {
                name: "stcd",
                alias: "stcd",
                type: "string"
            }, {
                name: "lgtd",
                alias: "lgtd",
                type: "double"
            }, {
                name: "lttd",
                alias: "lttd",
                type: "double"
            }];
            stFlayer = new j({
                source: a,
                fields: b,
                objectIdField: "ObjectID",
                spatialReference: {
                    wkid: 4326
                },
                geometryType: "point",
                labelsVisible: true,
                labelingInfo: [labelClass],
                popupTemplate: {
                    title: "{stnm}",
                    content: ""
                }
            });
            L.add(stFlayer);
            return stFlayer
        })
    }

    function errback(a) {
        console.error("图层加载失败：", a)
    }
});
var chart1, chart2, chart3;

function initChart() {
    chart1 = echarts.init(document.getElementById('chart1'));
    // chart2 = echarts.init(document.getElementById('chart2'));
    // chart3 = echarts.init(document.getElementById('chart3'));
    var a = {
        title: {
            text: '断面水质浓度变化曲线图',
            left: 'center',
            itemGap: 0
        },
        grid: {
            top: 30,
            left: 60,
            right: 20,
            bottom: 50
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [],
            bottom: 5
        },
        xAxis: {
            data: [],
        },
        yAxis: {
            // min: 32
        },
        series: []
    };
    chart1.setOption(a);
    // a.title.text = '南丰水质过程';
    // chart2.setOption(a);
    // a.title.text = '廖家湾水质过程';
    // chart3.setOption(a)
}
    </script>
</head>

<body>
<div id="viewDiv"></div>

<div id="paneDiv">
    <label><input id="chkLayer" name="Fruit" type="checkbox" checked="true" value="" />显示测站</label>
</div>
<div class="echart" style="width: 100%; height:40px; line-height: 40px; top:0px;text-align:center;  font-size: 20px;">
    <div id="tm">污染物质模拟</div>
    <div>
        <select id="valueType" class="form-control input-sm" style="width: 100px; display: inline-block; vertical-align: middle">
            <option value ="0">计划值</option>
            <option value ="1">实际值</option>
        </select>
        <input type="button"  class="btn btn-success btn-sm"  name="action" value="播放" id="btnPlay"/>
    </div>
    
    <!--<i class="fa fa-play"></i>-->
    <!--<button class="button button-primary button-circle button-action " style="height: 40px; width: 40px; line-height: 40px;"><i class="fa fa-play"></i></button>-->
</div>
<div class="echart" style="top: 120px; left: 55px;" style="border-radius: 8px;">
    <div id="chart1" style="width: 95%; height: 100%"></div>
</div>
</body>
</html>
